/**
 * @description 图表的json配置编辑
 */
import monaco from './init';
import { useEffect, useRef, useState } from 'react';

let timer = null

function JsonEdit({ value, onValueChange }) {

  // 盒子容器
  const container = useRef(null)
  // 编辑器实例
  const eidtor = useRef(null)
  // 文本实例
  const textModel = useRef(null)

  useEffect(() => {

    textModel.current = monaco.editor.createModel(JSON.stringify(value, null, 2), 'json')

    eidtor.current = monaco.editor.create(container.current, {
      model: textModel.current,
      // 自适应
      automaticLayout: false,
      // 控制光标平滑动画的启用状态
      cursorSmoothCaretAnimation: 'on',
      // 控制是否允许滚动超出最后一行
      scrollBeyondLastLine: false,
      // 当启用时，相同类型的括号会被赋予相同的颜色，有助于提高代码的可读性
      bracketPairColorization: { enabled: true },
      fontLigatures: true,
      minimap: {
        enabled: false // 禁用小地图
      },
      fontSize: 12,
      // 添加缩进设置
      tabSize: 2, // 每个缩进为两个空格
    })

    // 监听代码发生变动
    textModel.current.onDidChangeContent(e => {

      if (timer) {
        clearTimeout(timer)
      }

      timer = setTimeout(() => {
        let newCode = textModel.current.getValue()

        // 判断是否是合法的json字符串
        try {
          onValueChange(JSON.parse(newCode))
        } catch (error) {

        }

        timer = null
      }, 500)

    })


    return () => {
      if (eidtor.current) {
        eidtor.current.dispose()
        eidtor.current = null
      }

      if (textModel.current) {
        textModel.current.dispose()
        textModel.current = null
      }

    }
  }, [])

  return (
    <div ref={container} className='json-edit' ></div>
  );
}

export default JsonEdit